<template>
  <view class="imagebox" @touchstart='handleTouchstart' @touchmove='TouchMove' @touchend='TouchLeave'>
    <uni-swiper-dot @clickItem="clickItem" ref="selectfuntion" :info="info" field="content" :mode="mode">
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item v-for="(item, index) in ImageArray" :key="index">
          <image class="imageitem" :src="imageUrl + item.theme_community_img" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
  </view>
</template>

<script setup>
import { imageUrl } from '@/config/request/request';
import { ref } from 'vue';

const emits = defineEmits(['selectid', 'selectIndex', 'Touchstart', 'TouchLeave']);

const propos = defineProps({
  ImageArray: {
    type: Array,
    default: () => []
  },
  selectIamgeAdress: {
    type: Number,
    default: 0
  }
});

// 防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return function (...args) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

// 使用防抖函数包装 transition
const transition = debounce(() => {
  console.log('变化');
  emits('Touchstart');
}, 1000); // 设置防抖时间，例如1000毫秒（1秒）

const handleTouchstart = () => {
  console.log('开始移动');
  emits('Touchstart');
};

const TouchMove = (event) => {
  // console.log('持续移动', event);
};

const TouchLeave = () => {
  console.log('暂不移动');
  emits('TouchLeave');
};

const mode = ref('round');
const swiperDotIndex = ref(0);
const selectfuntion = ref(null);

const sortData = (indexid) => {
  console.log('触发', indexid);
  current.value = propos.ImageArray.findIndex(item => item.theme_id == indexid);
  swiperDotIndex.value = current.value;
  console.log('current.value', current.value);
};

const current = ref();

const change = (e) => {
  console.log(e.detail);
  current.value = propos.ImageArray[e.detail.current];
  emits('selectid', current.value);
  emits('selectIndex', e.detail.current);
};

defineExpose({
  sortData,
  transition
});
</script>

<style scoped>
.imagebox {
  position: absolute;
  z-index: 10;
  width: 100vw;
  height: 100vh;
}
swiper {
  height: 100vh;
}
.imageitem {
  width: 100vw;
  height: 100vh;
}
</style>